<template>
  <view class="application_details">
    <view class="application_box">
      <view class="application_item" v-for="item in titleArr" :key="item">
        <text class="title">{{ item }} ：</text
        >{{
          item == "申请状态"
            ? detailsData[titleData[item]]  == "0"
              ? "未办理"
              : detailsData[titleData[item]] == "1"
              ? "办理中"
              : "已办理"
            : item == "付款周期"? detailsData[titleData[item]]+"个月" : item == "租网金额"? `${detailsData.payWay} X ${detailsData.monthlyRent} = ${detailsData.payWay*Number(detailsData.monthlyRent)}`  : detailsData[titleData[item]]
        }}
      </view>
    </view>
    <view class="room-btn apartment">
      <button class="btn" @click="broadbandApplication">确认支付</button>
    </view>
  </view>
</template>

<script setup>
import { customNav } from "@/utils/customNav";
import {
  broadbandApplicationApi,
} from "@/package_property/pages/api/broadband.js";
import { onLoad } from "@dcloudio/uni-app";
import { ref } from "vue";

const detailsData = ref({});
const titleArr = ref([
  "户号",
  "租网押金",
  "租网金额",
  "付款周期",
  "租网时长",
  "实缴总金额",
  // "租赁开始时间",
  // "租赁结束时间",
]);
const titleData = ref({
  户号: "accountNumber",
  租网押金: "deposit",
  租网金额: "monthlyRent",
  付款周期: "payWay",
  租网时长: "rentTime",
  实缴总金额: "meetMoney",
});
async function broadbandApplication () {
  
   const res = await broadbandApplicationApi(detailsData.value);
  const { code, data } = res || {};
  if (code == 200) {
    console.log("data", data);
    // #ifdef MP-WEIXIN
    weixinClick(data);
    // #endif
    // #ifdef APP-PLUS || H5
    weChatAppPay(data);
    // #endif
  }
}
/**
 * 调微信支付API
 */
 const weixinClick = (payData) => {
  uni.requestPayment({
    provider: "wxpay",
    timeStamp: payData.timeStamp,
    nonceStr: payData.nonceStr,
    package: payData.prepayId,
    signType: payData.signType,
    paySign: payData.paySign,
    success: function (res) {
      if (res.errMsg == "requestPayment:ok") {
        //支付成功，跳转至成功页面
        uni.showToast({
        title: "支付成功",
        duration: 3000,
      });
      setTimeout(() => {
        customNav(`broadband`);
      }, 3000);
      }
    },
    fail: function (err) {
      if (err.errMsg == "requestPayment:fail cancel")
        return uni.showToast({
          title: "您已取消支付",
          duration: 2000,
          icon: "none",
        });
      uni.showToast({ title: "支付失败", duration: 2000, icon: "none" });
    },
  });
};
// 微信APP支付
const weChatAppPay = (payData) => {
  let params = {
    partnerId: payData.partnerId, //商户号
    prepayId: payData.prepayId, //预支付交易会话ID
    nonceStr: payData.nonceStr, //随机字符串
    timeStamp: payData.timeStamp, //时间戳
    sign: payData.paySign, //签名
  };
  window.mobile.jsCallPayWx(JSON.stringify(params));
  setTimeout(() => {
    customNav(`broadband`);
  }, 1500);
};
onLoad((option) => {

  let options = JSON.parse(option.details);
  console.log("options",options);
  
  detailsData.value = options;
});
</script>

<style lang="less" scoped>
.application_details {
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  .application_box {
    width: 80vw;
    padding: 30rpx;
    background: @color-origin-white;
    border-radius: 30rpx;
    margin: 20rpx 0;
    .application_item {
      height: 80rpx;
      line-height: 80rpx;
    }
  }
}
</style>